<template>
	<div class="footer">
		<component :is="footerComponent" v-if="isShowFooterAd"></component>
		<div class="footer_main">
			<div class="footer_nav">
				<router-link :to="{path:'/'}" class="on">触屏版</router-link>
				<router-link :to="{path:'/gotopc'}">PC版</router-link>
				<router-link :to="{path:'/download-app'}">客户端</router-link>
			</div>
			<address>&copy; Vue Demo. 2018.</address>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Footer",
		props:["footerComponent"],
		data: function(){
			return {
				isShowFooterAd: this.$store.state.ad.footerAd
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.footer{
		margin-top:10/@base;
		div{
			&.footer_main{
				font-size:16/@base;
				text-align: center;
				margin-top:10/@base;
				background-color: #da3c3c;
				padding:20/@base;
			}
			&.footer_nav{
				display: flex;
				width:80%;
				margin:0 auto;
				a{
					width:33.33%;
					line-height: 30/@base;
					text-align: center;
					color:#fff;
					&.on{
						background-color: #cc2020;
					}
					&:last-child{
						border-left:1/@base solid #fff;
					}
				}
			}
		}
		address{
			font-size: 16/@base;
			text-align: center;
			color:#fff;
			font-style: normal;
			margin-top:100/@base;
		}
	}
</style>
